<template>
  <div class="message_manage">
    <one-title title="消息通知" @refreshData="refresh">
      <div class="mes_btn">
        <el-button @click="readMessage">
          <i class="iconfont icon-btn_Save"></i>
          标记已读
        </el-button>
      </div>
    </one-title>
    <div class="fixed_top_56">
      <mes-search-comp
        :searchList="searchList"
        ref="mesSearch"
        :searchResult="searchResult"
        @searchInfo="_info">
      </mes-search-comp>
      <div class="table_container">
        <el-table
          :data="listData.list"
          border
          stripe
          ref="mesTable"
          v-loading="isLoading"
          :max-height="tableMaxHeight"
          style="width: 100%"
          :row-class-name="({row}) => !selectData.some((item) => item.id === row.id) || 'line_selected'"
          @row-click="(row) => $refs.mesTable.toggleRowSelection(row)"
          @sort-change="_sort"
          @selection-change="handleSelectionChange">
          <el-table-column
            type="selection"
            width="40"
            align="center">
          </el-table-column>
          <el-table-column
            label="消息内容"
            prop="content"
            min-width="80"
            align="left"
            show-overflow-tooltip>
            <template slot-scope="scope">
              <p class="message_status">
                <i class="type_icon" :class="{read_icon: scope.row.statusValue !== 'Unread'}"></i>
                <span class="content" :class="{has_url: scope.row.pageUrl}" @click="skipPage(scope.row, $event)">{{scope.row.content}}</span>
              </p>
            </template>
          </el-table-column>
          <mes-col-comp
            :key="index"
            v-for="(column, index) in columnList"
            :column="column"
          ></mes-col-comp>
        </el-table>
      </div>
      <mes-pagination
        @updateData="init"
        :currentPage="listData.pageNo"
        :total="listData.count || 0"
        :pageSize="listData.pageSize">
      </mes-pagination>
    </div>
  </div>
</template>

<script>
import {MaterialState} from '@/components/mesDict'
import tableColumns from './tableColumns'
import clip from '@/utils/clipboard'
export default {
  name: 'Message',
  components: {
    MaterialState,
  },
  data() {
    return {
      // 列表数据加载中
      isLoading: false,
      // 搜索参数
      searchData: {},
      // 搜索结果数
      searchResult: NaN,
      // 排序参数
      sortData: {},
      // 选中的数据
      selectData: [],
      // 表格列
      tableColumns: tableColumns,
      // 当前分页数据
      currentPage: {}
    }
  },
  computed: {
    // 列表数据
    listData() {
      return this.$store.state.message.listData
    },
    // 消息类型
    messageType() {
      let messageType = this.$store.state.dict.messageType.labels || []
      return this.addLabelAll(messageType)
    },
    // 消息状态
    messageStatus() {
      let messageStatus = this.$store.state.dict.messageStatus.labels || []
      return this.addLabelAll(messageStatus)
    },
    // 列循环
    columnList() {
      return this.tableColumns.filter(item => item.noForCol !== true && item.isShow !== false)
    },
    // 查询条件
    searchList() {
      let searchList = this.tableColumns || []
      return searchList
    },
  },
  mounted() {
    this.init()
  },
  methods: {
    // 刷新方法
    refresh() {
      this.$refs.mesSearch.clean()
      this.$refs.mesTable.clearSort()
      this.searchData = {}
      this.sortData = {}
      this.init()
    },
    // 初始化
    init(page) {
      this.isLoading = true
      let pageObj = page || {
        pageNo: 1,
        pageSize: this.listData.pageSize || 15
      }
      let postData = {
        method: 'post',
        // url: 'a/webmessage/webMessage/currentusermessage',
        url: 'a/webmessage/webMessage/list',
        data: {
          pageNo: pageObj.pageNo,
          pageSize: pageObj.pageSize
        },
        module: 'message',
        state: 'listData'
      }
      this.currentPage = {
        pageNo: pageObj.pageNo,
        pageSize: pageObj.pageSize
      }
      if (Object.keys(this.searchData).length > 0) {
        postData.data.query = this.searchData
      }
      if (Object.keys(this.sortData).length > 0) {
        postData.data.sort = this.sortData
      }
      this.$store.dispatch('saveData', postData).then((res) => {
        if (Object.keys(this.searchData).length > 0) {
          this.searchResult = res.count
        } else {
          this.searchResult = NaN
        }
      }).finally(() => {
        this.isLoading = false
      })
    },
    // 搜索
    _info(data) {
      this.$refs.mesTable.clearSort()
      this.sortData = {}
      this.searchData = data
      this.init()
    },
    // 复选框选中
    handleSelectionChange(val) {
      this.selectData = val
    },
    // 排序
    _sort(obj) {
      this.sortData = this.$getSortOrder(obj)
      this.init()
    },
    // 标记已读
    readMessage() {
      if (!this.selectData.length) {
        return this.tipMessage('error', '请选择消息')
      }
      if (!this.selectData.some((item) => item.statusValue === 'Unread')) {
        return this.tipMessage('error', '请选择未读的消息')
      }
      let postData = this.selectData.map((item) => {
        return {
          id: item.id,
          createDate: item.createDate
        }
      })
      this.readRequest(postData, true)
    },
    /**
     * 标记已读请求
     * @param postData 被标记的数据
     * @param isBtn 是否为按钮标记
     */
    readRequest(postData, isBtn) {
      if (postData.length) {
        this.$store.dispatch('saveData', {
          method: 'post',
          url: 'a/webmessage/webMessage/changestatus',
          data: {list: postData},
          noCommit: true
        }).then(() => {
          if (isBtn) {
            this.tipMessage('success', '标记成功')
          }
          this.getUnreadNumber()
          this.init()
          // this.init(this.currentPage)
        })
      }
    },
    // 获取全量未读消息数量
    getUnreadNumber() {
      this.$store.dispatch('saveData', {
        method: 'get',
        url: 'a/webmessage/webMessage/getunreadmessage',
        noCommit: true
      }).then((res) => {
        if (res.data !== undefined) {
          this.$store.commit('SetUnreadNumber', res.data)
        }
      })
    },
    /**
     * 跳转页面
     * @param item 当前消息
     * @param event 事件对象
     */
    skipPage(item, event) {
      if (item.pageUrl) {
        if (item.statusValue === 'Unread') {
          let obj = {
            id: item.id,
            createDate: item.createDate
          }
          this.readRequest([obj], false)
        }
        clip(item.workorderOrTurnoverNumber, event)
        this.tipMessage('success', 'ID已复制')
        this.$router.push(item.pageUrl)
      }
    },
    /**
     * 提示
     * @param type 提示类型
     * @param str 提示内容
     */
    tipMessage(type, str) {
      this.$message({
        type: type,
        message: str,
        duration: 1500,
        center: true
      })
    }
  }
}
</script>

<style lang="less">
  .message_manage{
    .message_status{
      height: 100%;
      height: 100%;
      display: flex;
      align-items: center;
      position: relative;
      .type_icon{
        position: absolute;
        display: inline-block;
        width: 8px;
        height: 8px;
        background-color: #f8000f;
        border-radius: 50%;
        position: absolute;
        top: 50%;
        margin-top: -4px;
        &.read_icon{
          background-color: transparent!important;
        }
      }
      .content{
        padding-left: 12px;
        &.has_url:hover{
          color:#0066cc;
          cursor:pointer;
        }
      }
    }
  }
</style>
